<!--
 * @Date: 2023-02-09 10:48:45
 * @LastEditTime: 2023-02-24 15:56:12
 * @FilePath: /hash-guess-game/src/views/home/components/arenaVue.vue
 * 介绍:竞技场
-->
<script lang="ts" setup>
import { _require } from "@@/utils/tools/tools";
</script>

<template>
  <h4 style="margin: var(--gap-md) 0">{{ $t("jing-ji-chang") }}</h4>
  <div
    @click="$router.push({ name: 'arena', query: { type: '3' } })"
    class="cardImg active"
  >
    <Mimage
      :src="_require('src/assets/img/home/qi-che__1.png')"
      width="100%"
    />
    <div style="left: var(--gap-md)" class="cardImg_text">
      {{ $t("xing-yun-sai-che") }}
    </div>
  </div>
  <div
    @click="$router.push({ name: 'arena', query: { type: '2' } })"
    class="cardImg active"
  >
    <Mimage
      style="margin-top: var(--gap-md)"
      :src="_require('src/assets/img/home/qi-che__2.png')"
      width="100%"
    />
    <div style="right: var(--gap-md)" class="cardImg_text">
      {{ $t("qi-ou-cai-cai-cai") }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.cardImg {
  position: relative;
  .cardImg_text {
    position: absolute;
    bottom: var(--gap-sm);
  }
}
</style>
